import React, {FC} from 'react';
import {Card, Descriptions, Drawer, Spin} from 'antd';
import utilStyles from '@/utils/utils.less'
import styles from '../index.less'
import {HistoryLogModel} from '../data';
import {DetailsDialogProps} from "@/global";
import service from '../service';
import useLoad from "@/hooks/useLoad";


/** 系统历史日志详情组件 */
const Details: FC<DetailsDialogProps> = props => {
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<HistoryLogModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id)
  }, [id]);

  return (
    <Drawer
      title="查看历史日志详细信息"
      width={850}
      visible={visible}
      onClose={hide}
      className={utilStyles.drawerBodyPadding}>
      <Spin spinning={loading} wrapperClassName={styles.h100p}>
        {model && (<Basic model={model}/>)}
      </Spin>
    </Drawer>
  );
};

function Basic(props: { model: HistoryLogModel }) {
  const {model} = props;
  return (
    <Card bordered={false} className={utilStyles.cardBodyDesc}>
      <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
        <Descriptions.Item label="操作类型">{model.categoryName}</Descriptions.Item>
        <Descriptions.Item label="数据主键">{model.primaryKey}</Descriptions.Item>
        <Descriptions.Item label="数据表名">{model.tableName}</Descriptions.Item>

        {model.beforeData && <Descriptions.Item label="操作前数据">
          <pre>{model.beforeData}</pre>
        </Descriptions.Item>}

        {model.afterData && <Descriptions.Item label="操作后数据">
          <pre>{model.afterData}</pre>
        </Descriptions.Item>}

        {model.diff && <Descriptions.Item label="差异">
          <pre>{model.diff}</pre>
        </Descriptions.Item>}

        <Descriptions.Item label="操作用户主键">{model.operateUserId}</Descriptions.Item>
        <Descriptions.Item label="操作用户">{model.operateUserName}</Descriptions.Item>
        <Descriptions.Item label="操作时间">{model.operateDateTime}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

export default React.memo(Details);


